<template>
  <div id="app">
    <router-view />
    <!-- 返回首页 -->
    <div v-show="isShow" class="back" @click="$router.replace('/list')">
      <img src="@/assets/image/back.png" alt="" />
    </div>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import axios from 'axios'
export default {
  name: 'App',

  provide () {
    return {
      openMap: this.openMap
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  watch: {
    $route: {
      handler (val) {
        this.isShow = ['/day1-airport', '/day1-high', '/day2-airport', '/day2-high'].includes(val.path)

        const url = window.location.href
        // const url = 'http://bmwi5.sc157.com'
        axios
          .get(
            `${'http://bmwi5.sc157.com'}/jssdk.php?url=${encodeURIComponent(url)}`
          )
          .then((res) => {
            if (res.status === 200) {
              const { appId, nonceStr, signature, timestamp } = res.data
              wx.config({
                debug: false,
                appId: appId,
                timestamp: timestamp,
                nonceStr: nonceStr,
                signature: signature,
                jsApiList: [
                  'updateAppMessageShareData',
                  'updateTimelineShareData',
                  'onMenuShareAppMessage',
                  'checkJsApi',
                  'openLocation',
                ],
              })
              // const shareTitle = document.title
              const shareTitle = '这就是5'
              const shareDesc = '2024南区崇左活动取车还车指南'
              const shareLink = `${window.location.origin}`

              const imgUrl = `${window.location.origin}/logo.jpg`
              wx.ready(function () {
                // 需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                  title: shareTitle, // 分享标题
                  desc: shareDesc, // 分享描述
                  link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl, // 分享图标
                  success: function () {
                    // 设置成功
                    console.log('设置成功')
                  },
                })

                wx.updateTimelineShareData({
                  title: '2024南区全新BMW 5系&创新纯电动BMW i5向新之旅', // 分享标题
                  link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl, // 分享图标
                  success: function () {
                    // 设置成功
                    console.log('设置成功')
                  },
                })
              })
            }
          })
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    /**
     * 打开微信地图
     * @param lat
     * @param lng
     * @param name
     * @param address
     */
    openMap (lng, lat, name, address) {
      if (!lng || !lat || !name || !address) {
        return
      }
      lat = parseFloat(lat)
      lng = parseFloat(lng)
      wx.openLocation({
        latitude: lat,
        longitude: lng,
        name: name,
        address: address,
        scale: 14,
      })

    },
  },

}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100%;
  .back {
    position: fixed;
    bottom: 40vw;
    right: 0;
    width: .9rem;
    height: .9rem;
    img {
      width: 100%;
    }
  }
}
</style>
